<template>
  <div class="aside">
    <el-menu :default-active="route.path" router :collapse="isCollapse">
      <template v-for="menu in menuList" :key="menu.path">
        <!-- 一级菜单-->
        <template v-if="!menu.children || !menu.children.length">
          <el-menu-item :index="menu.path" @click="menuItemClick(menu)">
            <el-icon>
              <component :is="menu.meta.icon" />
            </el-icon>
            <span>{{ menu.meta.title }}</span>
          </el-menu-item>
        </template>
        <!--二级菜单-->
        <el-sub-menu v-else :index="menu.path">
          <template #title>
            <el-icon>
              <component :is="menu.meta.icon" />
            </el-icon>
            <span>{{ menu.meta.title }}</span>
          </template>
          <template v-for="imenu in menu.children" :key="imenu.path">
            <!-- 三级菜单-->
            <template v-if="imenu.children?.length">
              <el-sub-menu :index="imenu.path">
                <template #title>
                  <el-icon>
                    <component :is="imenu.meta.icon" />
                  </el-icon>
                  <span>{{ imenu.meta.title }}</span>
                </template>
                <template v-for="iimenu in imenu.children" :key="iimenu.path">
                  <el-menu-item
                    :index="iimenu.path"
                    @click="menuItemClick(iimenu)"
                  >
                    <el-icon>
                      <component :is="iimenu.meta.icon" />
                    </el-icon>
                    <span>{{ iimenu.meta.title }}</span>
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>
            <el-menu-item
              v-else
              :index="imenu.path"
              @click="menuItemClick(imenu)"
            >
              <el-icon>
                <component :is="imenu.meta.icon" />
              </el-icon>
              <span>{{ imenu.meta.title }}</span>
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { useAccountStore, useGlobalStore } from '@/store'
import { storeToRefs } from 'pinia'
import dashboard from '@/router/main/dashboard/dashboard'
import { useRoute } from 'vue-router'
import type { ITabItem } from '@/global/types'
import { TAB_LIST } from '@/global/constant'
import { sessionCache } from '@/utils/cache'

// 当前路由
const route = useRoute()
// 获取选项卡数据
const globalStore = useGlobalStore()
const { tabList } = storeToRefs(globalStore)
// 菜单是否折叠
const isCollapse = ref(false)
// 一进来就添加首页选项卡
onMounted(() => {
  nextTick(() => {
    const tab = {
      path: route.path,
      title: route.meta.title as string
    }
    addTab(tab)
  })
})

// 获取菜单数据
const accountStore = useAccountStore()
const { menuList } = storeToRefs(accountStore)
// 假如首页对象已经存在了就不添加了，针对于进入了404页面再返回会出现两个首页的bug
if (dashboard.name !== menuList.value[0].name) {
  menuList.value.unshift(dashboard)
}

// 定义一个方法给父组件调用设置折叠状态
function setStatus(isFold: boolean) {
  isCollapse.value = isFold
}

// 点击菜单
const menuItemClick = (item) => {
  const tab = {
    path: item.path,
    title: item.meta.title
  }
  addTab(tab)
}

// 封装一个方法添加tab选项的
function addTab(tab: ITabItem) {
  // 如果能找到说明之前存在了，直接退出
  if (tabList.value.find((item) => item.path === tab.path)) return
  tabList.value.push(tab)
  // 缓存到本地
  sessionCache.setCache(TAB_LIST, tabList.value)
}

defineExpose({ setStatus })
</script>

<style scoped lang="less">
.aside {
  //--el-menu-active-color: var(--ly-primary-color);
}
</style>
